import { memo } from 'react';
import type { ReactNode, FC } from 'react';
import RankItem from '@/components/rank-item';
import { RanksWrapper } from './style';
import { shallowEqualApp, useAppSelector } from '@/store/hooks';
interface IProps {
  children?: ReactNode;
  name: string;
  RankList: any[];
}

const Ranks: FC<IProps> = (props) => {
  const { name, RankList } = props;
  const { currenRank } = useAppSelector(
    (state) => ({
      currenRank: state.rank.currentRank,
    }),
    shallowEqualApp
  );
  return (
    <RanksWrapper>
      <h2 className="name">{name}</h2>
      <div>
        {RankList.map((rank, index) => {
          return <RankItem rank={rank} key={index} currentName={currenRank.name}></RankItem>;
        })}
      </div>
    </RanksWrapper>
  );
};

export default memo(Ranks);
